<template>
    <div>
        <span>{{ title }}</span>
        <Poptip v-model="visible" placement="bottom" width="220" word-wrap transfer>
            <Icon type="ios-settings-outline" :size="14"></Icon>
            <div class="spec-set-poptip" slot="content">
                <div class="title">{{ title }}：</div>
                <RadioGroup v-model="setType">
                    <Radio :label="1">按比例</Radio>
                    <Radio :label="2">按金额</Radio>
                </RadioGroup>
                <div v-if="setType == 1" style="margin-top:10px;width: 100%;display:block">
                    <Button type="info" size="small" @click="handleSet(0.8)">80%</Button>
                    <Button type="info" size="small" @click="handleSet(0.7)">70%</Button>
                    <Button type="info" size="small" @click="handleSet(0.6)">60%</Button>
                    <Button type="info" size="small" @click="handleSet(0.5)">50%</Button>
                </div>
                <InputNumber v-if="setType == 2" v-model="value" :precision="2" :step="10" :disabled="false" :active-change="false" style="margin-top:10px;width: 100%;display:block" />
                <div class="btn-box" v-if="setType == 2">
                    <Button type="primary" size="small" @click="handleClick">应用到全部列</Button>
                </div>
            </div>
        </Poptip>
    </div>
</template>

<script>
export default {
    name: 'SetInput',
    props: {
        title: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: 'number'
        },
        options: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    data() {
        return {
            setType: 1,
            visible: false,
            value: 0
        }
    },
    methods: {
        handleClick() {
            this.visible = false;
            this.$emit('change', {
                setType: this.setType,
                value: this.value
            });
        },
        handleSet(percentage){
            this.visible = false;
            this.$emit('change', {
                setType: this.setType,
                value: percentage
            });
        }
    }
}
</script>